<template>
  <div class="equ-list">
    <el-select
      v-model="state.pkWc"
      class="wc-select"
      placeholder="工作中心"
      @change="wcChange"
    >
      <template v-for="wcItem in state.wcList" :key="`${wcItem.pkWc}`">
        <el-option :label="wcItem.wcName" :value="wcItem.pkWc || ''" />
      </template>
    </el-select>
    <ul class="tech-list">
      <template v-for="eqItem in state.eqList" :key="eqItem.pkEqlist">
        <li
          :class="state.pkEq === eqItem.pkEqlist ? 'selected' : ''"
          @click="toSelectEq(eqItem)"
        >
          {{ eqItem.equipName }}
        </li>
      </template>
    </ul>
  </div>
</template>
<script setup>
  import { getWcListApi } from '@/api/base/wc'
  import { getEqList } from '@/api/equip/equip_api'
  import { localStorageConfig } from '@/config/localstorage.config.js'
  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)
  const state = reactive({
    wcList: [],
    eqList: [],
    pkWc: '',
    pkEq: '',
  })

  onMounted(() => {
    queryWcList()
  })

  const queryWcList = async () => {
    const { data } = await getWcListApi({
      pkCorp,
    })
    state.wcList = data
  }

  const queryEqList = async (pkWc) => {
    const { data } = await getEqList({
      pkCorp,
      eqType: 0,
      state: 2000,
      pkWc,
    })
    state.eqList = data
  }

  const toSelectEq = (eqItem) => {
    state.pkEq = eqItem.pkEqlist
    _emit('selectEqChange', eqItem)
  }
  const wcChange = (pkWc) => {
    const wcItem = state.wcList.find((item) => {
      return item.pkWc === pkWc
    })
    queryEqList(pkWc)
    _emit('selectWcChange', wcItem)
  }
  const _emit = defineEmits(['selectEqChange', 'selectWcChange'])
</script>
<style lang="scss" scoped>
  .equ-list {
    width: 224px;
    height: 100%;
    padding: 6px;
    overflow: scroll;
    -ms-overflow-style: none; /* IE 和 Edge */
    scrollbar-width: none; /* Firefox */
    &::-webkit-scrollbar {
      display: none;
    }
    .wc-select {
      width: 100%;
      margin: 0 0 12px 0;
    }
    .tech-list {
      position: relative;
      width: 200px;
      height: calc(100% - 40px);
      padding: 0;
      margin: 0;
      overflow: auto;
      list-style: none; /* 移除默认的列表样式 */
      background: #f0f0f0; /* 使用浅灰色背景 */
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1),
        inset 0 0 10px rgba(255, 255, 255, 0.1);
    }

    .tech-list::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      pointer-events: none;
      content: '';
      background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.15),
        rgba(0, 0, 0, 0.05)
      );
    }

    .tech-list li {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      padding: 15px 20px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
      .eq-status {
        position: absolute;
        right: 6px;
        width: 36px;
        height: 36px;
        font-size: 22px;
        line-height: 36px;
        color: #ffffff;
        text-align: center;
        border-radius: 20px;
      }
      .eq-start {
        background: var(--el-color-success);
      }
      .eq-close {
        background: var(--el-color-warning);
      }
      .eq-two-word-state {
        font-size: 16px;
        background: var(--el-color-primary);
      }
      .eq-repair {
        background: var(--el-color-danger);
      }
      .eq-four-word-state {
        padding: 4px 5px;
        font-size: 12px;
        line-height: 14px;
        background: var(--el-color-primary);
      }
    }

    .tech-list li:last-child {
      border-bottom: none;
    }

    .tech-list li:hover {
      background: rgba(0, 0, 0, 0.05);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      transform: translateY(-2px);
    }

    .tech-list li.selected {
      background: rgba(0, 123, 255, 0.1);
      border-left: 4px solid #007bff;
      border-top-left-radius: 6px;
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
      transform: translateY(-4px);
    }

    .tech-list li::before {
      margin-right: 10px;
      font-size: 20px;
      color: #007bff;
      content: '🔹';
    }

    .tech-list li.selected::before {
      color: #007bff;
      content: '🔸';
    }

    .tech-list li:first-child {
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
    }

    .tech-list li:last-child {
      border-bottom-right-radius: 12px;
      border-bottom-left-radius: 12px;
    }
  }
</style>
